<template>
  <div class="pie">
    <div class="pie" id="maps"></div>
    <div class="pie-text">
      <a-row >
        <a-col :span="8" v-for="(item, i) in list" :key="i">
          {{ item.name }}
          <span style="color: #0070BC">{{ item.value }}</span>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getChina } from '@/api/map';
export default {
  name: 'Pie',
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      const chartDom = document.getElementById('maps');
      const myChart = echarts.init(chartDom);
      myChart.showLoading();
      getChina().then((jsonData) => {
        const json = jsonData.features.map(e => {
          const d = this.data.find(m => e.properties.name.includes(m.name));
          if (d) {
            return {
              name: e.properties.name,
              value: d ? d.value : 0
            };
          } else {
            return {
              name: ''
            };
          }
        }).filter(e => e.name && e.value);
        this.list = json;

        const num = json.map(e => e.value);
        const max = Math.max(...num);
        // const min = Math.min(...num);
        myChart.hideLoading();
        echarts.registerMap('China', jsonData, {
        });
        const option = {
          tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2
          },
          visualMap: {
            min: 0,
            max,
            // left: 'right',
            inRange: {
              color: [
                '#74add1',
                '#66a9d3',
                '#57a4d3',
                '#459ed4',
                '#3197d6',
                '#1e90d6',
                '#0b88d6'
              ]
            },
            text: ['High', 'Low'],
            calculable: true,
            show: false
          },
          series: [
            {
              name: '地域分布',
              type: 'map',
              roam: true,
              map: 'China',
              emphasis: {
                label: {
                  show: true
                }
              },
              zoom: 1.2,
              itemStyle: {
                areaColor: 'rgb(0, 112, 188)',
                borderColor: '#fff'
              },
              data: json
            }
          ]
        };
        myChart.setOption(option);
      });

      // option && myChart.setOption(option);
    });
  }
};
</script>

<style scoped lang="less">
  .pie {
    height: inherit;
    position: relative;
  }
  .pie-text {
    position: absolute;
    bottom: -30px;
    text-align: center;
    width: 100%;
    line-height: 1.8;
    height: 180px;
    overflow-y: auto;
    &.pie-text::-webkit-scrollbar {
      width: 0;
    }
  }
</style>
